---
interface Props {
  class?: string
  color?: 'orange' | 'blue' | 'green'
}

const { color = 'orange' } = Astro.props

// https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names
const bgNglowClasses: Record<NonNullable<Props['color']>, string> = {
  orange: 'bg-orange glow-orange',
  blue: 'bg-blue glow-blue',
  green: 'bg-green glow-green'
}

const underbarGlowClasses: Record<NonNullable<Props['color']>, string> = {
  orange: 'bg-[radial-gradient(closest-side,rgba(255,146,112,0.1)_0%,transparent_100%)]',
  blue: 'bg-[radial-gradient(closest-side,rgba(123,175,224,0.12)_0%,transparent_100%)]',
  green: 'bg-[radial-gradient(closest-side,rgba(135,230,151,0.12)_0%,transparent_100%)]'
}

const textClasses: Record<NonNullable<Props['color']>, string> = {
  orange: 'text-orange-400',
  blue: 'text-blue-400',
  green: 'text-green-400'
}
---

<div class:list={['relative border-y border-white/20 pb-16 pt-10', Astro.props.class ?? '']}>
  <div
    class="pointer-events-none absolute left-[00%] top-0 h-40 w-full select-none overflow-hidden"
  >
    <div
      class:list={[
        'absolute left-0 top-40 h-96 w-full -translate-y-full',
        underbarGlowClasses[color]
      ]}
    >
    </div>
  </div>

  {
    Astro.slots.has('icon') && (
      <div
        class:list={[
          'mb-10 flex h-16 w-16 items-center justify-center rounded-full *:w-[60%] empty:hidden',
          bgNglowClasses[color]
        ]}
      >
        <slot name="icon" />
      </div>
    )
  }

  {
    Astro.slots.has('subline') && (
      <sup class:list={['mb-1 text-base empty:hidden', textClasses[color]]}>
        <slot name="subline" />
      </sup>
    )
  }

  <h2 class="text-5xl font-bold">
    <slot name="headline" />
  </h2>

  <div class="text-md text-faded mt-12 flex flex-col gap-8 md:flex-row">
    <slot name="body" />

    {
      Astro.slots.has('body-left') && (
        <div class="flex-1 empty:hidden">
          <slot name="body-left" />
        </div>
      )
    }

    {
      Astro.slots.has('body-right') && (
        <div class="flex-1 empty:hidden">
          <slot name="body-right" />
        </div>
      )
    }
  </div>
</div>
